<template>
  <span>
    <label :style="full ? 'width: 100%' : ''" for="selectImg">{{ label }}</label>
    <input type="file" id="selectImg" ref="selectImgInput" style="position:absolute; clip:rect(0 0 0 0);"
           :accept="accept" @change="selectImg($event)">
  </span>
</template>

<script>
export default {
  name: "LeadingInFile",
  props: {
    label: {
      type: String,
      default: '选择文件'
    },
    full: Boolean,
    accept: {
      type: String,
      default: 'image/png, image/jpeg, image/gif, image/jpg'
    },
    params: Object
  },
  methods: {
    selectImg(e) {
      this.$emit('change', e, this.params);
    }
  }
}
</script>

<style lang="scss" scoped>
label {
  background-color: #1aa5ff;
  padding: 8px 15px;
  line-height: 1.5;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;

  &:hover {
    background-color: #1290e0;
  }
}
</style>
